<template>
  <a-modal
    :title="title"
    :visible="datasetEditModalVisible"
    ok-text="确定"
    cancel-text="取消"
    :mask-closable="false"
    centered
    @ok.stop="onOK"
    @cancel.stop="onCancel"
  >
    <div class="mode-box">
      <a-radio-group v-model="mode">
        <a-radio-button value="database">数据库配置</a-radio-button>
        <a-radio-button value="timing">定时配置</a-radio-button>
        <!-- <div v-show="!databaseConfig">请先配置数据库并进行连接测试！</div> -->
      </a-radio-group>
    </div>
    <div class="form-box">
      <formDatabaseSetting
        v-show="mode === 'database'"
        :selected-database-type="selectedDatabaseType"
        :is-cancel="isCancel"
      ></formDatabaseSetting>
      <formTimingSetting
        v-show="mode === 'timing'"
        :is-cancel="isCancel"
      ></formTimingSetting>
    </div>
  </a-modal>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import DataStore from '@/store/modules/data'
import formDatabaseSetting from './form/Database.vue'
import formTimingSetting from './form/Timing.vue'

@Component({
  name: 'databaseEditModal',
  components: {
    formDatabaseSetting,
    formTimingSetting,
  },
})
export default class DatasetEditModal extends Vue {
  /* 标题 */
  private title: string = '编辑数据配置'

  /* 是否展示 */
  private get datasetEditModalVisible() {
    return DataStore.datasetEditModalVisible
  }

  /* 是否展示 */
  private get databaseConfig() {
    return DataStore.databaseConfig
  }
  /* 模式 */
  private mode: string = 'database'

  private isSubmit: boolean = false
  private isCancel: boolean = false

  /* 数据类型 */
  @Prop() selectedDatabaseType!: string

  /* 确定 */
  public onOK() {
    DataStore.setIsEditSubmit(true)
    console.log(this.isSubmit)
    DataStore.setDatasetEditModalVisible(false)
    DataStore.setIsClearForm(false)
    // this.isSubmit = false
    console.log(DataStore.databaseConfig)
  }

  /* 取消 */
  public onCancel() {
    DataStore.setDatasetEditModalVisible(false)
    DataStore.setDatabaseConfig(null)
    DataStore.setIsClearForm(false)
    this.isCancel = true
  }
}
</script>

<style lang="less" scoped>
.mode-box {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding-bottom: 8px;
}
</style>
